<template>
  <div class="app-container">

    <u-page title="街电设置">
      <div slot="header">
        <el-button type="primary" @click="updateData">保存</el-button>
      </div>

      <el-form ref="dialogForm" :model="dataForm" :rules="rules" label-width="120px">
        <el-tabs v-model="active">

          <el-tab-pane label="基础设置" name="first">

            <el-form-item label="街电标识" prop="jdId">
              <el-input v-model="dataForm.jdId" placeholder="街电活动标识" clearable style="width: 400px" />
            </el-form-item>

            <el-form-item label="活动时间" prop="validityDate">
              <u-date-time-picker v-model="dataForm.validityDate" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDate" />
            </el-form-item>

            <el-form-item label="街电图片" prop="thumb">
              <u-upload v-model="dataForm.thumb" name="file" tips="建议尺寸:640 * 640 , 请将图片尺寸保持一致" />
            </el-form-item>

            <el-form-item label="积分抵扣" prop="creditSpecif">
              <el-row type="flex">
                <el-input v-model="dataForm.creditSpecif" placeholder="积分" clearable style="width: 100px" />
                <div style="width: 50px; text-align: center;">-</div>
                <el-input v-model="dataForm.creditSpecifPrice" placeholder="金额" clearable style="width: 100px" />
              </el-row>
              <u-tip-info title="积分抵扣比例，例如：100积分：1元" />
            </el-form-item>

            <el-form-item label="街电链接" prop="url">
              <el-input v-model="dataForm.url" placeholder="租借跳转小程序链接地址" clearable style="width: 400px" />
            </el-form-item>

          </el-tab-pane>

          <el-tab-pane label="轮播设置" name="fifth">

            <el-form-item label="轮播设置" prop="adv">
              <adv v-model="dataForm.adv" />
            </el-form-item>

          </el-tab-pane>

          <el-tab-pane label="权益设置" name="third">

            <el-card shadow="never" class="panel">

              <div class="panel-body">
                <div class="panel-header">
                  <h4>会员权益</h4>
                  <span> 开启后在平台中享受会员权益</span>
                </div>
                <div>
                  <el-switch v-model="dataForm.benefitEnabled" class="panel-switch" />
                </div>
              </div>

              <div v-if="dataForm.benefitEnabled" style="margin-top: 20px;">

                <el-form-item label="会员等级" prop="benefit">
                  <ues-level v-model="dataForm.benefit" multiple number @change="changeBenefitData" />
                </el-form-item>

              </div>
            </el-card>

          </el-tab-pane>

          <el-tab-pane label="弹窗设置" name="fourth">

            <el-card shadow="never" class="panel">
              <div class="panel-body">
                <div class="panel-header">
                  <h4>弹窗开启</h4>
                  <span> 开启后在小程序展示</span>
                </div>
                <div>
                  <el-switch v-model="dataForm.popupEnabled" class="panel-switch" />
                </div>
              </div>

              <div v-if="dataForm.popupEnabled" style="margin-top: 20px;">

                <el-form-item label="弹窗图片" prop="popupThumb">
                  <u-upload v-model="dataForm.popupThumb" name="file" tips="建议尺寸:640 * 640 , 请将图片尺寸保持一致" />
                </el-form-item>

                <el-form-item label="跳转地址" prop="popupUrl">
                  <el-input v-model="dataForm.popupUrl" placeholder="跳转小程序链接" clearable />
                </el-form-item>

              </div>
            </el-card>

          </el-tab-pane>

          <el-tab-pane label="规则说明" name="second">

            <el-form-item label="规则说明" prop="policy">
              <u-tinymce v-model="dataForm.policy" :height="300" />
            </el-form-item>

          </el-tab-pane>

        </el-tabs>
      </el-form>
    </u-page>

  </div>
</template>
<script>

import uesLevel from '@/components/member/uesLevel'
import adv from '@/components/module/adv'

export default {
  components: { uesLevel, adv },
  data() {
    return {
      api: this.$u.api.PluginsJiedianConfig,
      active: 'first',
      dataForm: {
        validityDate: [],
        consume_templateId: false
      },
      rules: {
        jdId: [
          { required: true, message: '街电标识必填', trigger: 'change' }
        ],
        validityDate: [
          { required: true, message: '活动时间必填', trigger: 'blur' }
        ],
        thumb: [
          { required: true, message: '街电图片必填', trigger: 'blur' }
        ],
        creditSpecif: [
          { required: true, message: '积分抵扣必填', trigger: 'blur' }
        ]
      },
      list: []
    }
  },
  created() {
    this.getLoad()
  },
  methods: {
    // 初始化数据
    async getLoad() {
      try {
        const res = await this.api.fetch()
        this.dataForm = res.data
        const { beginTime, endTime, benefitContent } = this.dataForm
        if (beginTime && endTime) {
          this.dataForm.validityDate = [beginTime, endTime]
        }
        this.dataForm.benefit = JSON.parse(benefitContent)
      } catch (error) {
        console.error(error)
      }
    },
    // 提交编辑数据
    updateData() {
      const self = this
      this.$confirm('确认更改街电设置', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self.$refs['dialogForm'].validate((valid) => {
          if (valid) {
            self.api.update(self.dataForm).then(() => {
              self.getLoad()
              self.$u.msg('保存成功')
            })
          }
        })
      }).catch(() => {
      })
    },
    changeDate(item) {
      if (item) {
        this.dataForm.beginTime = item[0]
        this.dataForm.endTime = item[1]
      } else {
        this.dataForm.beginTime = ''
        this.dataForm.endTime = ''
      }
    },
    changeBenefitData(list) {
      this.dataForm.benefitContent = JSON.stringify(list)
    }
  }

}
</script>

<style lang="scss" scoped>

.panel{
  margin-bottom: 20px;
  .panel-body{
    display:flex;
    justify-content:space-between;

    .panel-header{
      display: flex;
      flex-flow: column;
      color: #999;
      font-size: 12px;

      h4{
        font-size: 14px;
        color: #000;
      }
    }

    .panel-switch{
      margin-top: 20px;
    }
  }
}

</style>
